{template "header.html"}

<link href="{THEME_PATH}assets/global/plugins/cropper/css/cropper.css" rel="stylesheet" type="text/css" />
<link href="{THEME_PATH}assets/global/plugins/cropper/css/main.css" rel="stylesheet" type="text/css" />

<script src="{THEME_PATH}assets/global/plugins/cropper/js/cropper.js" type="text/javascript"></script>
<script src="{THEME_PATH}assets/global/plugins/cropper/js/main.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function (){
        var img = $('#image');
        var realWidth;//真实的宽度
        var realHeight;//真实的高度
        $("<img/>").attr("src", $(img).attr("src")).load(function() {
            $('#image_cc').html(this.width+'X'+this.height);
        });
    });
</script>
<form class="form-horizontal" method="post" style="margin-top: -20px;" role="form" id="myform">
    {$form}
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center margin-bottom-20">
                <a href="{$data.url}" target="_blank">{$data.url}</a>
            </div>
        </div>
        <div class="row">
            <div class="col-md-9">
                <div class="img-container">
                    <img id="image" src="{$data.url}?{SYS_TIME}" alt="Picture">
                </div>
            </div>
            <div class="col-md-3">
                <div class="docs-preview clearfix">
                    <div class="img-preview preview-lg"></div>
                    <div class="margin-top-10 margin-bottom-10 text-center">
                        {dr_lang('图片实际尺寸：')}<span id="image_cc"></span>
                    </div>
                </div>
                <div class="docs-data">
                    <div class="input-group input-group-sm">
                        <label class="input-group-addon" for="dataX">X</label>
                        <input type="text" class="form-control" name="data[x]" id="dataX" placeholder="x">
                        <span class="input-group-addon">px</span>
                    </div>
                    <div class="input-group input-group-sm">
                        <label class="input-group-addon" for="dataY">Y</label>
                        <input type="text" class="form-control" name="data[y]" id="dataY" placeholder="y">
                        <span class="input-group-addon">px</span>
                    </div>
                    <div class="input-group input-group-sm">
                        <label class="input-group-addon" for="dataWidth">Width</label>
                        <input type="text" class="form-control" name="data[w]" id="dataWidth" placeholder="width">
                        <span class="input-group-addon">px</span>
                    </div>
                    <div class="input-group input-group-sm">
                        <label class="input-group-addon" for="dataHeight">Height</label>
                        <input type="text" class="form-control" name="data[h]" id="dataHeight" placeholder="height">
                        <span class="input-group-addon">px</span>
                    </div>

                    <div class="input-group input-group-sm hide">
                        <label class="input-group-addon" for="dataRotate">Rotate</label>
                        <input type="text" class="form-control" name="data[r]" id="dataRotate" placeholder="rotate">
                        <span class="input-group-addon">deg</span>
                    </div>

                    <div class="input-group input-group-sm hide">
                        <label class="input-group-addon" for="dataScaleX">ScaleX</label>
                        <input type="text" class="form-control" name="data[sx]" id="dataScaleX" placeholder="scaleX">
                        <span class="input-group-addon">px</span>
                    </div>

                    <div class="input-group input-group-sm hide">
                        <label class="input-group-addon" for="dataScaleY">ScaleY</label>
                        <input type="text" class="form-control" name="data[sy]" id="dataScaleY" placeholder="scaleY">
                        <span class="input-group-addon">px</span>
                    </div>



                    <div  id="actions">
                        <div class="docs-buttons text-center">
                            <!-- <h3>Toolbar:</h3> -->

                            <div class="btn-group">
                                <button type="button" class="btn btn-primary" data-method="zoom" data-option="0.1" title="Zoom In">
                                    <span class="docs-tooltip" data-toggle="tooltip" title="cropper.zoom(0.1)">
                                      <span class="fa fa-search-plus"></span>
                                    </span>
                                </button>
                                <button type="button" class="btn btn-primary" data-method="zoom" data-option="-0.1" title="Zoom Out">
                                    <span class="docs-tooltip" data-toggle="tooltip" title="cropper.zoom(-0.1)">
                                      <span class="fa fa-search-minus"></span>
                                    </span>
                                </button>

                                <button type="button" class="btn btn-primary" data-method="crop" title="Crop">
                                    <span class="docs-tooltip" data-toggle="tooltip" title="cropper.crop()">
                                      <span class="fa fa-check"></span>
                                    </span>
                                </button>
                                <button type="button" class="btn btn-primary" data-method="clear" title="Clear">
                                    <span class="docs-tooltip" data-toggle="tooltip" title="cropper.clear()">
                                      <span class="fa fa-times"></span>
                                    </span>
                                </button>
                                <button type="button" class="btn btn-primary" data-method="reset" title="Reset">
                                    <span class="docs-tooltip" data-toggle="tooltip" title="cropper.reset()">
                                      <span class="fa fa-refresh"></span>
                                    </span>
                                </button>
                            </div>

                            <div class="btn-group">
                                <button type="button" class="btn btn-primary" data-method="move" data-option="-10" data-second-option="0" title="Move Left">
                                    <span class="docs-tooltip" data-toggle="tooltip" title="cropper.move(-10, 0)">
                                      <span class="fa fa-arrow-left"></span>
                                    </span>
                                </button>
                                <button type="button" class="btn btn-primary" data-method="move" data-option="10" data-second-option="0" title="Move Right">
                                    <span class="docs-tooltip" data-toggle="tooltip" title="cropper.move(10, 0)">
                                      <span class="fa fa-arrow-right"></span>
                                    </span>
                                </button>
                                <button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="-10" title="Move Up">
                                    <span class="docs-tooltip" data-toggle="tooltip" title="cropper.move(0, -10)">
                                      <span class="fa fa-arrow-up"></span>
                                    </span>
                                </button>
                                <button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="10" title="Move Down">
                                    <span class="docs-tooltip" data-toggle="tooltip" title="cropper.move(0, 10)">
                                      <span class="fa fa-arrow-down"></span>
                                    </span>
                                </button>
                            </div>



                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

{template "footer.html"}